<!DOCTYPE html>
<html lang="zh-CN">
    <!-- title -->


    

<!-- keywords -->



<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="author" content="Lolipop">
    <meta name="renderer" content="webkit">
    <meta name="copyright" content="Lolipop">
    
        <meta name="keywords" content="Lolipop,frontend,full-stack,前端,全栈">
    
    <meta name="description" content="">
    <meta name="description" content="笔者自高中到现在，游走于 Pixiv 若干载，不慎收藏了许多名家雅作。 独乐乐不如众乐乐！笔者想做一个 web 页面来随机访问我的收藏，不过在此之前，可以先实现服务端上的内容。再之后做网页时，不过是简单的读取数据库罢了！ 最初，笔者以为得将我的库存全部放到服务器上项目中去，然后随机访问其中的图片实现功能，但这样做很难得同步，遂搁置。不过，笔者在最近发现有一个 Pixiv 图片代理网站 可以快速下载">
<meta property="og:type" content="article">
<meta property="og:title" content="这位客官，要来一张我珍藏许久的图片吗">
<meta property="og:url" content="https://lolipopj.github.io/2022/01/12/random-get-me-a-picture/index.html">
<meta property="og:site_name" content="Lolipop">
<meta property="og:description" content="笔者自高中到现在，游走于 Pixiv 若干载，不慎收藏了许多名家雅作。 独乐乐不如众乐乐！笔者想做一个 web 页面来随机访问我的收藏，不过在此之前，可以先实现服务端上的内容。再之后做网页时，不过是简单的读取数据库罢了！ 最初，笔者以为得将我的库存全部放到服务器上项目中去，然后随机访问其中的图片实现功能，但这样做很难得同步，遂搁置。不过，笔者在最近发现有一个 Pixiv 图片代理网站 可以快速下载">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/lolipopj/LolipopJ.github.io/2022/01/12/random-get-me-a-picture/pixiv-cat.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/lolipopj/LolipopJ.github.io/2022/01/12/random-get-me-a-picture/bot-service.png">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/lolipopj/LolipopJ.github.io/2022/01/12/random-get-me-a-picture/pixiv-request-referer.png">
<meta property="article:published_time" content="2022-01-12T16:00:00.000Z">
<meta property="article:modified_time" content="2022-01-14T16:00:00.000Z">
<meta property="article:author" content="Lolipop">
<meta property="article:tag" content="Node">
<meta property="article:tag" content="Telegram">
<meta property="article:tag" content="Bot">
<meta property="article:tag" content="Koa">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/lolipopj/LolipopJ.github.io/2022/01/12/random-get-me-a-picture/pixiv-cat.png">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="icon" href="https://cdn.jsdelivr.net/gh/lolipopj/LolipopJ.github.io/static/assets/favicon.ico">
    
    <title>这位客官，要来一张我珍藏许久的图片吗 · Lolipop&#39;s Studio</title>
    <!-- /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
/* This file is meant as a standalone workflow for
- testing support for link[rel=preload]
- enabling async CSS loading in browsers that do not support rel=preload
- applying rel preload css once loaded, whether supported or not.
*/ -->
<script>
    (function (w) {
        'use strict'
        // rel=preload support test
        if (!w.loadCSS) {
            w.loadCSS = function () {}
        }
        // define on the loadCSS obj
        var rp = (loadCSS.relpreload = {})
        // rel=preload feature support test
        // runs once and returns a function for compat purposes
        rp.support = (function () {
            var ret
            try {
                ret = w.document.createElement('link').relList.supports('preload')
            } catch (e) {
                ret = false
            }
            return function () {
                return ret
            }
        })()

        // if preload isn't supported, get an asynchronous load by using a non-matching media attribute
        // then change that media back to its intended value on load
        rp.bindMediaToggle = function (link) {
            // remember existing media attr for ultimate state, or default to 'all'
            var finalMedia = link.media || 'all'

            function enableStylesheet() {
                link.media = finalMedia
            }

            // bind load handlers to enable media
            if (link.addEventListener) {
                link.addEventListener('load', enableStylesheet)
            } else if (link.attachEvent) {
                link.attachEvent('onload', enableStylesheet)
            }

            // Set rel and non-applicable media type to start an async request
            // note: timeout allows this to happen async to let rendering continue in IE
            setTimeout(function () {
                link.rel = 'stylesheet'
                link.media = 'only x'
            })
            // also enable media after 3 seconds,
            // which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
            setTimeout(enableStylesheet, 3000)
        }

        // loop through link elements in DOM
        rp.poly = function () {
            // double check this to prevent external calls from running
            if (rp.support()) {
                return
            }
            var links = w.document.getElementsByTagName('link')
            for (var i = 0; i < links.length; i++) {
                var link = links[i]
                // qualify links to those with rel=preload and as=style attrs
                if (
                    link.rel === 'preload' &&
                    link.getAttribute('as') === 'style' &&
                    !link.getAttribute('data-loadcss')
                ) {
                    // prevent rerunning on link
                    link.setAttribute('data-loadcss', true)
                    // bind listeners to toggle media back
                    rp.bindMediaToggle(link)
                }
            }
        }

        // if unsupported, run the polyfill
        if (!rp.support()) {
            // run once at least
            rp.poly()

            // rerun poly on an interval until onload
            var run = w.setInterval(rp.poly, 500)
            if (w.addEventListener) {
                w.addEventListener('load', function () {
                    rp.poly()
                    w.clearInterval(run)
                })
            } else if (w.attachEvent) {
                w.attachEvent('onload', function () {
                    rp.poly()
                    w.clearInterval(run)
                })
            }
        }

        // commonjs
        if (typeof exports !== 'undefined') {
            exports.loadCSS = loadCSS
        } else {
            w.loadCSS = loadCSS
        }
    })(typeof global !== 'undefined' ? global : this)
</script>

    <style type="text/css">
    @font-face {
        font-family: 'Oswald-Regular';
        src: url("/font/Oswald-Regular.ttf");
    }

    body {
        margin: 0;
    }

    header,
    footer,
    .back-top,
    .sidebar,
    .container,
    .site-intro-meta,
    .toc-wrapper {
        display: none;
    }

    .site-intro {
        position: relative;
        z-index: 3;
        width: 100%;
        /* height: 50vh; */
        overflow: hidden;
    }

    .site-intro-placeholder {
        position: absolute;
        z-index: -2;
        top: 0;
        left: 0;
        width: calc(100% + 300px);
        height: 100%;
        background: repeating-linear-gradient(-45deg, #444 0, #444 80px, #333 80px, #333 160px);
        background-position: center center;
        transform: translate3d(-226px, 0, 0);
        animation: gradient-move 2.5s ease-out 0s infinite;
    }

    @keyframes gradient-move {
        0% {
            transform: translate3d(-226px, 0, 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }
</style>

    <link rel="preload" href="/css/style.css?v=20211217" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="/css/dark.css?v=20211217" as="style">
    <link rel="stylesheet" href="/css/dark.css">
    <link rel="stylesheet" href="/css/mobile.css?v=20211217" media="(max-width: 960px)">
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" as="script">
    <link rel="preload" href="/scripts/main.js?v=20211217" as="script">
    <link rel="preload" href="/scripts/dark.js?v=20211217" as="script">
    <link rel="preload" href="/font/Oswald-Regular.ttf" as="font" crossorigin>
    <link rel="preload" href="https://at.alicdn.com/t/font_327081_1dta1rlogw17zaor.woff" as="font" crossorigin>
    <!-- algolia -->
    
        <script>
            var hits = JSON.parse('{"per_page":10}')
            var labels = JSON.parse('{"input_placeholder":"搜索博客","hits_empty":"Ops，我未能提供任何搜索结果：${query}","hits_stats":"在 ${time} ms 内找到了 ${hits} 个结果"}')

            var algolia = {
                applicationID: 'V9YD7AWBOS',
                apiKey: '5cb206cb0658a9daff865eef79de4bc4',
                indexName: 'lolipopJ.github.io',
                hits: hits,
                labels: labels
            }
        </script>
    
    <!-- 百度统计  -->
    
    <!-- 谷歌统计  -->
    
<meta name="generator" content="Hexo 5.4.1"><link rel="alternate" href="/atom.xml" title="Lolipop" type="application/atom+xml">
</head>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript">
        if (typeof window.$ == undefined) {
            console.warn('jquery load from jsdelivr failed, will load local script')
            document.write('<script src="/lib/jquery.min.js" />')
        }
    </script>
    
        <body class="post-body">
    
        <!-- header -->
        <header class="header header-mobile">
    <!-- top read progress line -->
    <div class="header-element">
        <div class="read-progress read-progress-feature"></div>
    </div>
    <!-- sidebar menu button -->
    <div class="header-element">
        
            <div class="header-sidebar-menu header-sidebar-menu-rounded">
        
            
                <i class="fas fa-bars"></i>
            
        </div>
    </div>
    <!-- header actions -->
    <div class="header-actions">
        <!-- theme mode switch button -->
        <span class="header-theme-btn header-element">
            <i class="fas fa-adjust"></i>
        </span>
        <!-- back to home page text -->
        <span class="home-link header-element">
            <a href=/>Lolipop's Studio.</a>
        </span>
    </div>
    <!-- toggle banner for post layout -->
    
        
            <div class="banner banner-clean">
        
            <div class="blog-title header-element">
                <a href="/">Lolipop&#39;s Studio.</a>
            </div>
            <div class="post-title header-element">
                <a href="#" class="post-name">这位客官，要来一张我珍藏许久的图片吗</a>
            </div>
        </div>
    
</header>

        <!-- fixed footer -->
        <footer class="footer-fixed">
    <!-- back to top button -->
    <div class="footer-fixed-element">
        
            <div class="back-top back-top-hidden back-top-rounded">
        
        
            <i class="fas fa-chevron-up"></i>
        
        </div>
    </div>
</footer>

        <!-- wrapper -->
        <div class="wrapper">
            <div class="site-intro" style="







    height:50vh;

">
    
    <!-- 主页  -->
    
        
    <!-- 404页  -->
            
    <div class="site-intro-placeholder"></div>
    <div class="site-intro-img" style="background-image: url(https://source.unsplash.com/1600x900/?coder)"></div>
    <div class="site-intro-meta">
        <!-- 标题  -->
        <h1 class="intro-title">
            <!-- 主页  -->
            
                这位客官，要来一张我珍藏许久的图片吗
            <!-- 404 -->
            
        </h1>
        <!-- 副标题 -->
        <p class="intro-subtitle">
            <!-- 主页副标题  -->
            
                
            <!-- 404 -->
            
        </p>
        <!-- 文章页 meta -->
        
            <div class="post-intros">
                <!-- 文章页标签  -->
                
                    <div class= post-intro-tags >
    
        
        
            
        
        
        <span class="post-category" data-categories="后端开发"">
            <i class="fas fa-folder post-category-icon"></i>
            <span class="post-category-text">
                后端开发
            </span>
        </span>
    
    
        <a class="post-tag" href="javascript:void(0);" data-tags="Node">Node</a>
    
        <a class="post-tag" href="javascript:void(0);" data-tags="Telegram">Telegram</a>
    
        <a class="post-tag" href="javascript:void(0);" data-tags="Bot">Bot</a>
    
        <a class="post-tag" href="javascript:void(0);" data-tags="Koa">Koa</a>
    
</div>

                
                
                    <div class="post-intro-read">
                        <span>字数统计: <span class="post-count word-count">2.8k</span>阅读时长: <span class="post-count reading-time">13 min</span></span>
                    </div>
                
                <div class="post-intro-meta">
                    <!-- 撰写日期 -->
                    <span class="iconfont-archer post-intro-calander">&#xe676;</span>
                    <span class="post-intro-time">2022/01/13</span>
                    <!-- busuanzi -->
                    
                        <span id="busuanzi_container_page_pv" class="busuanzi-pv">
                            <span class="iconfont-archer post-intro-busuanzi">&#xe602;</span>
                            <span id="busuanzi_value_page_pv"></span>
                        </span>
                    
                    <!-- 文章分享 -->
                    <span class="share-wrapper">
                        <span class="iconfont-archer share-icon">&#xe71d;</span>
                        <span class="share-text">Share</span>
                        <ul class="share-list">
                            <li class="iconfont-archer share-qr" data-type="qr">&#xe75b;
                                <div class="share-qrcode"></div>
                            </li>
                            <li class="iconfont-archer" data-type="weibo">&#xe619;</li>
                            <li class="iconfont-archer" data-type="qzone">&#xe62e;</li>
                            <li class="iconfont-archer" data-type="twitter">&#xe634;</li>
                            <li class="iconfont-archer" data-type="facebook">&#xe67a;</li>
                        </ul>
                    </span>
                </div>
            </div>
        
    </div>
</div>

            <script>
  // get user agent
  function getBrowserVersions() {
    var u = window.navigator.userAgent
    return {
      userAgent: u,
      trident: u.indexOf('Trident') > -1, //IE内核
      presto: u.indexOf('Presto') > -1, //opera内核
      webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
      gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
      iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
      iPad: u.indexOf('iPad') > -1, //是否为iPad
      webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部
      weixin: u.indexOf('MicroMessenger') == -1, //是否为微信浏览器
      uc: u.indexOf('UCBrowser') > -1, //是否为android下的UC浏览器
    }
  }
  var browser = {
    versions: getBrowserVersions(),
  }
  console.log('userAgent: ' + browser.versions.userAgent)

  // callback
  function fontLoaded() {
    console.log('font loaded')
    if (document.getElementsByClassName('site-intro-meta')) {
      document
        .getElementsByClassName('intro-title')[0]
        .classList.add('intro-fade-in')
      document
        .getElementsByClassName('intro-subtitle')[0]
        .classList.add('intro-fade-in')
      var postIntros = document.getElementsByClassName('post-intros')[0]
      if (postIntros) {
        postIntros.classList.add('post-fade-in')
      }
    }
  }

  // UC不支持跨域，所以直接显示
  function asyncCb() {
    if (browser.versions.uc) {
      console.log('UCBrowser')
      fontLoaded()
    } else {
      WebFont.load({
        custom: {
          families: ['Oswald-Regular'],
        },
        loading: function () {
          // 所有字体开始加载
          // console.log('font loading');
        },
        active: function () {
          // 所有字体已渲染
          fontLoaded()
        },
        inactive: function () {
          // 字体预加载失败，无效字体或浏览器不支持加载
          console.log('inactive: timeout')
          fontLoaded()
        },
        timeout: 5000, // Set the timeout to two seconds
      })
    }
  }

  function asyncErr() {
    console.warn('script load from CDN failed, will load local script')
  }

  // load webfont-loader async, and add callback function
  function async(u, cb, err) {
    var d = document,
      t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0]
    o.src = u
    if (cb) {
      o.addEventListener(
        'load',
        function (e) {
          cb(null, e)
        },
        false
      )
    }
    if (err) {
      o.addEventListener(
        'error',
        function (e) {
          err(null, e)
        },
        false
      )
    }
    s.parentNode.insertBefore(o, s)
  }

  var asyncLoadWithFallBack = function (arr, success, reject) {
    var currReject = function () {
      reject()
      arr.shift()
      if (arr.length) async(arr[0], success, currReject)
    }

    async(arr[0], success, currReject)
  }

  asyncLoadWithFallBack(
    [
      'https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.min.js',
      'https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js',
      "/lib/webfontloader.min.js",
    ],
    asyncCb,
    asyncErr
  )
</script>

            <img class="loading" src="/assets/loading.svg" style="display: block; margin: 6rem auto 0 auto; width: 6rem; height: 6rem;" />
            <div class="container container-unloaded">
                <main class="main post-page">
    <article class="article-entry">
        <p>笔者自高中到现在，游走于 Pixiv 若干载，不慎收藏了许多名家雅作。</p>
<p>独乐乐不如众乐乐！笔者想做一个 web 页面来随机访问我的收藏，不过在此之前，可以先实现服务端上的内容。再之后做网页时，不过是简单的读取数据库罢了！</p>
<p>最初，笔者以为得将我的库存全部放到服务器上项目中去，然后随机访问其中的图片实现功能，但这样做很难得同步，遂搁置。不过，笔者在最近发现有一个 <a target="_blank" rel="noopener" href="https://pixiv.re/">Pixiv 图片代理网站</a> 可以快速下载到图片，大喜，于是开始了这个小工程。</p>
<p><img src="https://cdn.jsdelivr.net/gh/lolipopj/LolipopJ.github.io/2022/01/12/random-get-me-a-picture/pixiv-cat.png" alt="请求需包含 Referer"></p>
<p>实现此功能分为两个阶段：一，为本地的图片生成数据库索引条目。二，开发 Telegram Bot 接口，随机从数据库索引中获取一张图片转发给聊天。</p>
<h2 id="为本地的-Pixiv-图片建立索引"><a href="#为本地的-Pixiv-图片建立索引" class="headerlink" title="为本地的 Pixiv 图片建立索引"></a>为本地的 Pixiv 图片建立索引</h2><h3 id="初始化数据库-Pixiv-图片索引信息"><a href="#初始化数据库-Pixiv-图片索引信息" class="headerlink" title="初始化数据库 Pixiv 图片索引信息"></a>初始化数据库 Pixiv 图片索引信息</h3><p>如果使用 Pixiv 图片代理的方法，只需要将 Artwork 的基本信息上传给我们的数据库即可。</p>
<p>根据<a target="_blank" rel="noopener" href="https://core.telegram.org/bots/api#sending-files">官方文档</a>，当发送图片文件时，Telegram API 对图片的大小有限制：直接使用 HTTP URL 的方式不超过 5 MB，服务器上传图片的方式不超过 10 MB（以<a target="_blank" rel="noopener" href="https://core.telegram.org/bots/api#senddocument">文件的格式</a>发送时，不超过 50 MB，本文不采用文件的格式发送）。因此，在设计数据库时，还需要考虑图片的大小。</p>
<p>设计 Sequenlize 数据库模型 <code>ServicePixivCollection.js</code> 如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">DataTypes</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;sequelize&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">id</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">INTEGER</span>,</span><br><span class="line">    <span class="attr">autoIncrement</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">primaryKey</span>: <span class="literal">true</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Pixiv artwork ID. Example: 95400283 for for 95400283_p$&#123;picIndex&#125;.$&#123;picType&#125;</span></span><br><span class="line">  <span class="attr">picId</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">INTEGER</span>,</span><br><span class="line">    <span class="attr">allowNull</span>: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Artwork index. Example: 1 for $&#123;pixivId&#125;_p1.$&#123;picType&#125;</span></span><br><span class="line">  <span class="attr">picIndex</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">INTEGER</span>,</span><br><span class="line">    <span class="attr">allowNull</span>: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Artwork suffix type. Example: jpg for $&#123;pixivId&#125;_p$&#123;picIndex&#125;.jpg</span></span><br><span class="line">  <span class="attr">picType</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">TEXT</span>,</span><br><span class="line">    <span class="attr">allowNull</span>: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Artwork size, MB</span></span><br><span class="line">  <span class="attr">picSize</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">FLOAT</span>,</span><br><span class="line">    <span class="attr">allowNull</span>: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// Artwork save date</span></span><br><span class="line">  <span class="attr">picCreatedAt</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">DATE</span>,</span><br><span class="line">    <span class="attr">allowNull</span>: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>如采用最小实现，也可以将上面的 <code>picId</code>, <code>picIndex</code> 和 <code>picType</code> 合并为一个数据项，例如 <code>picName</code>，直接保存图片的名字。笔者考虑到后续可能会增添新的功能，于是将它们单独拎出来储存。</p>
<p>处理不同路径下的图片时，可能需要保存执行的情况。例如 A 目录在当前时间点进行维护，获取了所有的图片，下次读取 A 目录时，应当从上次维护的时间开始获取最新的图片。现在新加了 B 目录，如果从上次维护 A 的时间点开始读取图片的话，在时间点之前的图片将无法上传。因此，针对不同文件夹的维护，可以分别建立一个单独的数据项。</p>
<p>设计数据库模型 <code>ServiceProcess.js</code> 如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">DataTypes</span> &#125; = <span class="built_in">require</span>(<span class="string">&quot;sequelize&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">id</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">INTEGER</span>,</span><br><span class="line">    <span class="attr">autoIncrement</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">primaryKey</span>: <span class="literal">true</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">serviceId</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">UUID</span>,</span><br><span class="line">    <span class="attr">defaultValue</span>: <span class="title class_">DataTypes</span>.<span class="property">UUIDV4</span>,</span><br><span class="line">    <span class="attr">allowNull</span>: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">serviceName</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">TEXT</span>,</span><br><span class="line">    <span class="attr">allowNull</span>: <span class="literal">false</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">serviceConfig</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">TEXT</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">serviceSharedData</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">TEXT</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">lastExecAt</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">DATE</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">haveExecTime</span>: &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="title class_">DataTypes</span>.<span class="property">INTEGER</span>,</span><br><span class="line">    <span class="attr">allowNull</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">defaultValue</span>: <span class="number">0</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>为 Sequelize 添加该模型，向 <code>sequelize.js</code> 添加如下代码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> servicePixivCollectionModel = <span class="built_in">require</span>(<span class="string">&quot;path/to/ServicePixivCollection&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> serviceProcessModel = <span class="built_in">require</span>(<span class="string">&quot;path/to/ServiceProcess&quot;</span>);</span><br><span class="line"></span><br><span class="line">sequelize.<span class="title function_">define</span>(<span class="string">&quot;ServicePixivCollection&quot;</span>, servicePixivCollectionModel);</span><br><span class="line">sequelize.<span class="title function_">define</span>(<span class="string">&quot;ServiceProcess&quot;</span>, serviceProcessModel);</span><br></pre></td></tr></table></figure>

<p>配置扫描图片的间隔时间和本地图片路径，编写 <code>config.js</code> 如下:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">pixiv</span>: &#123;</span><br><span class="line">    <span class="attr">randomGetFromCollection</span>: &#123;</span><br><span class="line">      <span class="attr">duration</span>: <span class="number">3600</span>,</span><br><span class="line">      <span class="attr">path</span>: [<span class="string">&quot;C:\\path\\to\\collection&quot;</span>],</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>扫描指定目录的图片文件，图片文件名称应满足从 Pixiv 下载图片的名称格式。例如：<code>95400283_p0.jpg</code>，<code>95400283</code> 为数据库中的 <code>picId</code>，<code>_p0</code> 的 <code>0</code> 为 <code>picIndex</code>，<code>.jpg</code> 中的 <code>jpg</code> 为 <code>picType</code>。编写生成图片索引的代码 <code>pixiv.js</code> 如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123; readdir, stat &#125; = <span class="built_in">require</span>(<span class="string">&quot;fs/promises&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&quot;path/to/config&quot;</span>).<span class="property">pixiv</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Sequelize</span> = <span class="built_in">require</span>(<span class="string">&quot;path/to/sequelize&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> generateCollectionIndex = <span class="keyword">async</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> serviceName = <span class="string">&quot;Generate Collection Index&quot;</span>;</span><br><span class="line">  <span class="keyword">const</span> bToMB = <span class="number">1024</span> * <span class="number">1024</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// File size with decimal places</span></span><br><span class="line">  <span class="keyword">const</span> fileSizeReservedDecimalPlace = <span class="number">3</span>;</span><br><span class="line">  <span class="keyword">const</span> fileSizeReservedDecimalNum = <span class="number">10</span> ** fileSizeReservedDecimalPlace;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> sequelize = <span class="keyword">await</span> <span class="title class_">Sequelize</span>();</span><br><span class="line">  <span class="keyword">const</span> <span class="title class_">ServicePixivCollection</span> = sequelize.<span class="property">models</span>.<span class="property">ServicePixivCollection</span>;</span><br><span class="line">  <span class="keyword">const</span> <span class="title class_">ServiceProcess</span> = sequelize.<span class="property">models</span>.<span class="property">ServiceProcess</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">let</span> collectionPaths = config.<span class="property">generateCollectionIndex</span>.<span class="property">path</span>;</span><br><span class="line">  <span class="keyword">if</span> (!<span class="title class_">Array</span>.<span class="title function_">isArray</span>(collectionPaths)) &#123;</span><br><span class="line">    collectionPaths = [collectionPaths];</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Get filenames in collection paths</span></span><br><span class="line">  <span class="keyword">let</span> allFiles = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> collectionPath <span class="keyword">of</span> collectionPaths) &#123;</span><br><span class="line">    <span class="keyword">let</span> files = [];</span><br><span class="line">    files = files.<span class="title function_">concat</span>(<span class="keyword">await</span> <span class="title function_">readdir</span>(collectionPath));</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Only keep files with Pixiv naming style</span></span><br><span class="line">    <span class="keyword">const</span> reg = <span class="regexp">/^\d+_p\d+.(jpg|png|gif)$/</span>;</span><br><span class="line">    files = files.<span class="title function_">filter</span>(<span class="function">(<span class="params">filename</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> reg.<span class="title function_">test</span>(filename);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Get file stat and resolve file info</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; files.<span class="property">length</span>; i++) &#123;</span><br><span class="line">      <span class="keyword">const</span> filename = files[i];</span><br><span class="line">      <span class="keyword">const</span> filePath = path.<span class="title function_">join</span>(collectionPath, filename);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> picIdSplitArr = filename.<span class="title function_">split</span>(<span class="string">&quot;_p&quot;</span>);</span><br><span class="line">      <span class="keyword">const</span> picId = <span class="title class_">Number</span>(picIdSplitArr[<span class="number">0</span>]);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> picIndexSplitArr = picIdSplitArr[<span class="number">1</span>].<span class="title function_">split</span>(<span class="string">&quot;.&quot;</span>);</span><br><span class="line">      <span class="keyword">const</span> picIndex = <span class="title class_">Number</span>(picIndexSplitArr[<span class="number">0</span>]);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> picType = picIndexSplitArr[<span class="number">1</span>];</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> picStat = <span class="keyword">await</span> <span class="title function_">stat</span>(filePath);</span><br><span class="line">      <span class="keyword">const</span> picSize =</span><br><span class="line">        <span class="title class_">Math</span>.<span class="title function_">floor</span>((picStat.<span class="property">size</span> / bToMB) * fileSizeReservedDecimalNum) /</span><br><span class="line">        fileSizeReservedDecimalNum; <span class="comment">// MB</span></span><br><span class="line">      <span class="keyword">const</span> picCreatedAt = picStat.<span class="property">mtimeMs</span>; <span class="comment">// ms</span></span><br><span class="line"></span><br><span class="line">      files[i] = &#123;</span><br><span class="line">        <span class="attr">picName</span>: filename,</span><br><span class="line">        picId,</span><br><span class="line">        picIndex,</span><br><span class="line">        picType,</span><br><span class="line">        picSize,</span><br><span class="line">        picCreatedAt,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Only keep files that recently saved</span></span><br><span class="line">    <span class="keyword">const</span> serviceProcess = <span class="keyword">await</span> <span class="title class_">ServiceProcess</span>.<span class="title function_">findOne</span>(&#123;</span><br><span class="line">      <span class="attr">where</span>: &#123; serviceName, <span class="attr">serviceConfig</span>: collectionPath &#125;,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">if</span> (serviceProcess) &#123;</span><br><span class="line">      <span class="comment">// Only update or create Pixiv artwork that saved after last time this service is done</span></span><br><span class="line">      <span class="keyword">let</span> lastUpdateIndexTime = serviceProcess.<span class="property">dataValues</span>.<span class="property">lastExecAt</span>;</span><br><span class="line">      <span class="keyword">if</span> (lastUpdateIndexTime) &#123;</span><br><span class="line">        lastUpdateIndexTime = <span class="keyword">new</span> <span class="title class_">Date</span>(lastUpdateIndexTime).<span class="title function_">getTime</span>();</span><br><span class="line">        files = files.<span class="title function_">filter</span>(<span class="function">(<span class="params">pic</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">return</span> pic.<span class="property">picCreatedAt</span> &gt; lastUpdateIndexTime;</span><br><span class="line">        &#125;);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">await</span> <span class="title class_">ServiceProcess</span>.<span class="title function_">create</span>(&#123;</span><br><span class="line">        serviceName,</span><br><span class="line">        <span class="attr">serviceConfig</span>: collectionPath,</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    allFiles = allFiles.<span class="title function_">concat</span>(files);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> updateIndexAt = <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toISOString</span>();</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Update or create pic index</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> picFile <span class="keyword">of</span> allFiles) &#123;</span><br><span class="line">    <span class="comment">// 注意：此处的 updateOrCreate() 为笔者自定义的方法</span></span><br><span class="line">    <span class="comment">// 其作用为：当存在 item 时，更新 item；不存在时，创建 item</span></span><br><span class="line">    <span class="keyword">await</span> sequelize.<span class="title function_">updateOrCreate</span>(</span><br><span class="line">      <span class="title class_">ServicePixivCollection</span>,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">picId</span>: picFile.<span class="property">picId</span>,</span><br><span class="line">        <span class="attr">picIndex</span>: picFile.<span class="property">picIndex</span>,</span><br><span class="line">      &#125;,</span><br><span class="line">      picFile</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Update service process record</span></span><br><span class="line">  <span class="title class_">ServiceProcess</span>.<span class="title function_">update</span>(</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">lastExecAt</span>: updateIndexAt,</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">where</span>: &#123; serviceName &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">  );</span><br><span class="line">  <span class="title class_">ServiceProcess</span>.<span class="title function_">increment</span>(<span class="string">&quot;haveExecTime&quot;</span>, &#123; <span class="attr">where</span>: &#123; serviceName &#125; &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  generateCollectionIndex,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>设置定时扫描图片，基于 <code>toad-scheduler</code> 库编写服务代码如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> &#123;</span><br><span class="line">  <span class="title class_">ToadScheduler</span>,</span><br><span class="line">  <span class="title class_">SimpleIntervalJob</span>,</span><br><span class="line">  <span class="title class_">AsyncTask</span>,</span><br><span class="line">&#125; = <span class="built_in">require</span>(<span class="string">&quot;toad-scheduler&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> pixivTask = <span class="built_in">require</span>(<span class="string">&quot;path/to/pixiv&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> config = <span class="built_in">require</span>(<span class="string">&quot;path/to/config&quot;</span>).<span class="property">pixiv</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> initService = <span class="keyword">async</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> taskGenerateCollectionIndex = <span class="keyword">new</span> <span class="title class_">AsyncTask</span>(</span><br><span class="line">    <span class="string">&quot;Generate Pixiv Collection Index&quot;</span>,</span><br><span class="line">    <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">      <span class="keyword">await</span> pixivTask.<span class="title function_">generateCollectionIndex</span>();</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function">(<span class="params">error</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">error</span>(error);</span><br><span class="line">    &#125;</span><br><span class="line">  );</span><br><span class="line">  <span class="keyword">const</span> jobGenerateCollectionIndex = <span class="keyword">new</span> <span class="title class_">SimpleIntervalJob</span>(</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">seconds</span>: config.<span class="property">generateCollectionIndex</span>.<span class="property">duration</span>,</span><br><span class="line">      <span class="attr">runImmediately</span>: <span class="literal">true</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    taskGenerateCollectionIndex</span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> scheduler = <span class="keyword">new</span> <span class="title class_">ToadScheduler</span>();</span><br><span class="line">  scheduler.<span class="title function_">addSimpleIntervalJob</span>(jobGenerateCollectionIndex);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = initService;</span><br></pre></td></tr></table></figure>

<p>程序启动时，运行 <code>initService()</code> 即可。服务器将自动读取指定目录下的 Pixiv 图片文件，并在数据库中建立索引。<a href="#%E9%9A%8F%E6%9C%BA%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%E5%BA%93%E4%B8%AD%E7%9A%84%E4%B8%80%E4%B8%AA-pixiv-%E5%9B%BE%E7%89%87%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80">下一步</a>，我们将随机从数据库中读取一张作品的信息。</p>
<h3 id="思路：爬取-Pixiv-图片的源文件地址"><a href="#思路：爬取-Pixiv-图片的源文件地址" class="headerlink" title="思路：爬取 Pixiv 图片的源文件地址"></a>思路：爬取 Pixiv 图片的源文件地址</h3><p>如果使用亲自获取图片并转发的方法，除了前面需要初始化数据库的图片索引信息外，还需要构建 Axios 请求，爬取网页源代码，从中读取 Artwork 的下载链接等信息，再上传到数据库。</p>
<p>例如，对于下载 <a target="_blank" rel="noopener" href="https://www.pixiv.net/artworks/95400283"><code>95400283_p0.jpg</code></a>，最少需要获取其源文件链接 <code>https://i.pximg.net/img-original/img/2022/01/09/07/27/17/95400283_p0.jpg</code> 中的 <code>/2022/01/09/07/27/17</code> 部分，并上传到数据库中。</p>
<p>更多的，在爬取源代码时，可以记录下图片的作者信息，图片是否可以在工作时安全观看（登录后才能爬取此类内容，可能需要在请求时添加个人账户信息）等，对日后处理展示内容大有裨益。</p>
<p>处理网页源代码时，可以使用 <a target="_blank" rel="noopener" href="https://github.com/cheeriojs/cheerio">cheerio</a> 库增加效率。</p>
<h2 id="为-Telegram-Bot-添加随机获取-Pixiv-图片的接口"><a href="#为-Telegram-Bot-添加随机获取-Pixiv-图片的接口" class="headerlink" title="为 Telegram Bot 添加随机获取 Pixiv 图片的接口"></a>为 Telegram Bot 添加随机获取 Pixiv 图片的接口</h2><h3 id="随机获取数据库中的一个-Pixiv-图片访问地址"><a href="#随机获取数据库中的一个-Pixiv-图片访问地址" class="headerlink" title="随机获取数据库中的一个 Pixiv 图片访问地址"></a>随机获取数据库中的一个 Pixiv 图片访问地址</h3><p>编写 <code>randomGetPixivCollection.js</code> 代码如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">Sequelize</span> = <span class="built_in">require</span>(<span class="string">&quot;path/to/sequelize&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> randomGetPixivCollection = <span class="keyword">async</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> sequelize = <span class="keyword">await</span> <span class="title class_">Sequelize</span>();</span><br><span class="line">    <span class="keyword">const</span> <span class="title class_">ServicePixivCollection</span> = sequelize.<span class="property">models</span>.<span class="property">ServicePixivCollection</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Gain the total number of Pixiv artworks</span></span><br><span class="line">    <span class="keyword">const</span> artworksCount = <span class="keyword">await</span> <span class="title class_">ServicePixivCollection</span>.<span class="title function_">count</span>();</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Generate a random value</span></span><br><span class="line">    <span class="keyword">const</span> randomArtworkId = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * artworksCount) + <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Get random artwork</span></span><br><span class="line">    <span class="keyword">const</span> artwork = <span class="keyword">await</span> <span class="title class_">ServicePixivCollection</span>.<span class="title function_">findOne</span>(&#123;</span><br><span class="line">      <span class="attr">where</span>: &#123; <span class="attr">id</span>: randomArtworkId &#125;,</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Resolve artwork object</span></span><br><span class="line">    <span class="keyword">const</span> data = artwork.<span class="property">dataValues</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> picId = data.<span class="property">picId</span>;</span><br><span class="line">    <span class="keyword">const</span> picIndex = data.<span class="property">picIndex</span>;</span><br><span class="line">    <span class="keyword">const</span> picType = data.<span class="property">picType</span>;</span><br><span class="line"></span><br><span class="line">    data.<span class="property">picName</span> = <span class="string">`<span class="subst">$&#123;picId&#125;</span>_p<span class="subst">$&#123;picIndex&#125;</span>.<span class="subst">$&#123;picType&#125;</span>`</span>;</span><br><span class="line">    data.<span class="property">picNameMD</span> = <span class="string">`<span class="subst">$&#123;picId&#125;</span>\\_p<span class="subst">$&#123;picIndex&#125;</span>\\.<span class="subst">$&#123;picType&#125;</span>`</span>;</span><br><span class="line">    data.<span class="property">picUrl</span> = <span class="string">`https://www.pixiv.net/artworks/<span class="subst">$&#123;picId&#125;</span>`</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> picProxyUrlParam;</span><br><span class="line">    <span class="keyword">if</span> (picIndex &gt; <span class="number">0</span>) &#123;</span><br><span class="line">      picProxyUrlParam = <span class="string">`<span class="subst">$&#123;picId&#125;</span>-<span class="subst">$&#123;picIndex + <span class="number">1</span>&#125;</span>.<span class="subst">$&#123;picType&#125;</span>`</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      picProxyUrlParam = <span class="string">`<span class="subst">$&#123;picId&#125;</span>.<span class="subst">$&#123;picType&#125;</span>`</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    data.<span class="property">picProxyUrl</span> = <span class="string">`https://pixiv.cat/<span class="subst">$&#123;picProxyUrlParam&#125;</span>`</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">ok</span>: <span class="literal">true</span>,</span><br><span class="line">      data,</span><br><span class="line">      <span class="attr">error</span>: <span class="literal">undefined</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">ok</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="attr">data</span>: <span class="literal">undefined</span>,</span><br><span class="line">      error,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = randomGetPixivCollection;</span><br></pre></td></tr></table></figure>

<p>根据 Pixiv.cat 网站的使用说明，对单张图片的 Pixiv 作品，应访问 <code>https://pixiv.cat/$&#123;picId&#125;.$&#123;picType&#125;</code>。而对于多张图片的 Pixiv 作品（漫画），应访问 <code>https://pixiv.cat/$&#123;picId&#125;-$&#123;picIndex + 1&#125;.$&#123;picType&#125;</code>。</p>
<p>可能会影响体验，需要改进的地方是：当作品名为 <code>$&#123;picId&#125;_p0.$&#123;picType&#125;</code> 时，我们不知道该作品是否为单张图片，还是漫画作品，无法正确判断应该访问的 URL 链接。<a href="#%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8-pixiv-%E5%9B%BE%E7%89%87%E4%BB%A3%E7%90%86">在后面</a>，我们将针对此情况做处理。</p>
<h3 id="添加-Telegram-Bot-命令"><a href="#添加-Telegram-Bot-命令" class="headerlink" title="添加 Telegram Bot 命令"></a>添加 Telegram Bot 命令</h3><p>接下来为 Bot 添加指令，以调用随机获取图片的接口。同样，这里给出使用 Pixiv 图片代理的具体实现，以及亲自获取图片并转发的可能思路。</p>
<h4 id="直接使用-Pixiv-图片代理"><a href="#直接使用-Pixiv-图片代理" class="headerlink" title="直接使用 Pixiv 图片代理"></a>直接使用 Pixiv 图片代理</h4><p>注意，使用这种方式上传的图片<strong>不超过 5 MB</strong>。</p>
<p>编写 Bot 的配置如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">bot.<span class="title function_">onText</span>(<span class="regexp">/\/random_pixiv/</span>, <span class="keyword">async</span> (msg) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> chatId = msg.<span class="property">chat</span>.<span class="property">id</span>;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="title function_">randomGetPixivCollection</span>();</span><br><span class="line">  <span class="keyword">if</span> (res.<span class="property">ok</span> === <span class="literal">true</span>) &#123;</span><br><span class="line">    <span class="comment">// Send placeholder message</span></span><br><span class="line">    <span class="keyword">const</span> placeholderMessage = <span class="keyword">await</span> bot.<span class="title function_">sendMessage</span>(</span><br><span class="line">      chatId,</span><br><span class="line">      <span class="string">`Geeeeting a random Pixiv artwork ...`</span></span><br><span class="line">    );</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> data = res.<span class="property">data</span>;</span><br><span class="line">    <span class="keyword">const</span> &#123;</span><br><span class="line">      id,</span><br><span class="line">      picNameMD,</span><br><span class="line">      picUrl,</span><br><span class="line">      picSize,</span><br><span class="line">      picProxyUrl,</span><br><span class="line">      picId,</span><br><span class="line">      picIndex,</span><br><span class="line">      picType,</span><br><span class="line">    &#125; = data;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> caption = <span class="string">`[source](<span class="subst">$&#123;picUrl&#125;</span>)`</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> msgReplied = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (picSize &lt; <span class="number">5</span>) &#123;</span><br><span class="line">      <span class="comment">// Artwork size is smaller than 5 MB, send photo message</span></span><br><span class="line">      <span class="keyword">const</span> sendPhotoOptions = &#123;</span><br><span class="line">        caption,</span><br><span class="line">        <span class="attr">parse_mode</span>: <span class="string">&quot;MarkdownV2&quot;</span>,</span><br><span class="line">        <span class="attr">disable_web_page_preview</span>: <span class="literal">true</span>,</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">await</span> bot.<span class="title function_">sendPhoto</span>(chatId, picProxyUrl, sendPhotoOptions);</span><br><span class="line"></span><br><span class="line">        msgReplied = <span class="literal">true</span>;</span><br><span class="line">      &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">        <span class="keyword">if</span> (picIndex == <span class="number">0</span>) &#123;</span><br><span class="line">          <span class="keyword">try</span> &#123;</span><br><span class="line">            <span class="comment">// Comic mode artwork with index=0 may send failed</span></span><br><span class="line">            <span class="comment">// Use comic mode url instead</span></span><br><span class="line">            <span class="keyword">const</span> picProxyUrl = <span class="string">`https://pixiv.cat/<span class="subst">$&#123;picId&#125;</span>-1.<span class="subst">$&#123;picType&#125;</span>`</span>;</span><br><span class="line">            <span class="keyword">await</span> bot.<span class="title function_">sendPhoto</span>(chatId, picProxyUrl, sendPhotoOptions);</span><br><span class="line"></span><br><span class="line">            msgReplied = <span class="literal">true</span>;</span><br><span class="line">          &#125; <span class="keyword">catch</span> (err) &#123;</span><br><span class="line">            <span class="comment">//</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Artwork size is not smaller than 5 MB or send failed again,</span></span><br><span class="line">    <span class="comment">// send caption message</span></span><br><span class="line">    <span class="keyword">if</span> (!msgReplied) &#123;</span><br><span class="line">      <span class="keyword">await</span> bot.<span class="title function_">sendMessage</span>(chatId, caption, &#123;</span><br><span class="line">        <span class="attr">parse_mode</span>: <span class="string">&quot;MarkdownV2&quot;</span>,</span><br><span class="line">        <span class="attr">disable_web_page_preview</span>: <span class="literal">false</span>,</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Remove placeholder message</span></span><br><span class="line">    bot.<span class="title function_">deleteMessage</span>(chatId, placeholderMessage.<span class="property">message_id</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    bot.<span class="title function_">sendMessage</span>(</span><br><span class="line">      chatId,</span><br><span class="line">      <span class="string">&quot;Get random pixiv artwork failed. You may try to call it again later!&quot;</span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>在上面这段代码中，当以 <code>bot.sendPhoto()</code> 的方法尝试发送 5 MB 以下的图片失败时，首先重新构建请求 URL 为 <code>https://pixiv.cat/$&#123;data.picId&#125;-1.$&#123;data.picType&#125;</code>，再次进行发送。如果还是失败（可能图片被作者删除），则发送简单的链接文本。由此，解决了前面提到的无法判断作品是否为漫画作品的问题。</p>
<p>与 Telegram 上的机器人对话，发送命令 <code>\random_pixiv</code>，结果如下：</p>
<p><img src="https://cdn.jsdelivr.net/gh/lolipopj/LolipopJ.github.io/2022/01/12/random-get-me-a-picture/bot-service.png" alt="Bot service"></p>
<h4 id="思路：获取-Pixiv-图片并转发"><a href="#思路：获取-Pixiv-图片并转发" class="headerlink" title="思路：获取 Pixiv 图片并转发"></a>思路：获取 Pixiv 图片并转发</h4><p>注意，使用这种方式上传的图片<strong>不超过 10 MB</strong>。</p>
<p>我们无法直接在 <code>bot.sendPhoto()</code> 方法中使用 Pixiv 源站图片的获取链接，这是因为 Pixiv 设置了反爬虫机制，只接收请求头的 Referer 包含 <code>https://www.pixiv.net/</code> 的请求。</p>
<p><img src="https://cdn.jsdelivr.net/gh/lolipopj/LolipopJ.github.io/2022/01/12/random-get-me-a-picture/pixiv-request-referer.png" alt="请求需包含 Referer"></p>
<p>因此，我们需要在自己的服务器上构造 Axios 请求，设置 Referer 请求头，然后发送请求向 Pixiv 服务器获取图片，再将图片转为 <code>multipart/form-data</code> 格式发送给 Telegram 会话。</p>
<h2 id="为-Koa-添加随机获取-Pixiv-图片的接口"><a href="#为-Koa-添加随机获取-Pixiv-图片的接口" class="headerlink" title="为 Koa 添加随机获取 Pixiv 图片的接口"></a>为 Koa 添加随机获取 Pixiv 图片的接口</h2><p>Koa 应用程序本身也提供了路由功能，在这里可以很轻松地将获取随机 Pixiv 图片的服务对接到 Koa 上去。</p>
<p>编写路由文件如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="built_in">require</span>(<span class="string">&quot;koa-router&quot;</span>)();</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> randomGetPixivCollection = <span class="built_in">require</span>(<span class="string">&quot;path/to/randomGetPixivCollection&quot;</span>);</span><br><span class="line"></span><br><span class="line">router.<span class="title function_">get</span>(<span class="string">&quot;/random&quot;</span>, <span class="keyword">async</span> <span class="keyword">function</span> (<span class="params">ctx</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> res = <span class="keyword">await</span> <span class="title function_">randomGetPixivCollection</span>();</span><br><span class="line">  <span class="keyword">if</span> (res.<span class="property">ok</span> === <span class="literal">true</span>) &#123;</span><br><span class="line">    ctx.<span class="title function_">redirect</span>(res.<span class="property">data</span>.<span class="property">picProxyUrl</span>);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    ctx.<span class="property">body</span> = <span class="string">&quot;Get random Pixiv artwork failed.&quot;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = router;</span><br></pre></td></tr></table></figure>

<p>然而，这里并没有解决前面提到的漫画作品问题，留待用户在跳转后自行操作。</p>
<h2 id="参考文章"><a href="#参考文章" class="headerlink" title="参考文章"></a>参考文章</h2><ul>
<li><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_45826022/article/details/109406389">爬取 pixiv 每日推荐</a></li>
</ul>

    </article>
    <!-- license -->
    
        <div class="license-wrapper">
            <p>原文作者：<a href="https://LolipopJ.github.io">Lolipop</a>
            <p>原文链接：<a href="https://lolipopj.github.io/2022/01/12/random-get-me-a-picture/">https://lolipopj.github.io/2022/01/12/random-get-me-a-picture/</a>
            <p>发表日期：<a href="https://lolipopj.github.io/2022/01/12/random-get-me-a-picture/">January 12th 2022, 4:00:00 pm</a>
            <p>更新日期：<a href="https://lolipopj.github.io/2022/01/12/random-get-me-a-picture/">January 14th 2022, 4:00:00 pm</a>
            <p>版权声明：本文采用<a rel="license noopener" target="_blank" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可</p>
        </div>
    
    <!-- paginator -->
    <ul class="post-paginator">
        <li class="next">
            
                <div class="nextSlogan">Next Post</div>
                <a href="/2022/02/11/connect-with-pgsql/" title="连接到 Windows 端的 PostgreSQL 数据库">
                    <div class="nextTitle">连接到 Windows 端的 PostgreSQL 数据库</div>
                </a>
            
        </li>
        <li class="previous">
            
                <div class="prevSlogan">Previous Post</div>
                <a href="/2022/01/08/start-telegram-bot/" title="从零开始使用 Telegram Bot">
                    <div class="prevTitle">从零开始使用 Telegram Bot</div>
                </a>
            
        </li>
    </ul>
    <!-- comment -->
    
        <div class="post-comment">
            <!-- 来必力 City 版安装代码 -->


            

            

            
    <div id="gitalk-container"></div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.css">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.min.js"></script>
    <script>
        let idOption = 'Wed Jan 12 2022 16:00:00 GMT+0000'
        
            idOption = location.pathname
        
        const gitalk = new Gitalk({
            clientID: '3e27d4e7935138a80cd8',
            clientSecret: 'cd3eda2bf0740e7a51b8b611ade908eb95590e45',
            repo: 'LolipopJ.github.io',
            owner: 'LolipopJ',
            admin: ["LolipopJ"],
            id: idOption,
            distractionFreeMode: false,
            createIssueManually: false,
        })
        gitalk.render('gitalk-container')
    </script>
    <noscript>为正常使用 Gitalk 评论功能，您需要激活 JavaScript</noscript>


            <!-- utteranc评论 -->


            <!-- partial('_partial/comment/changyan') -->
            <!--PC版-->


            
            

            

        </div>
    
    <!-- timeliness note -->
    <!-- idea from: https://hexo.fluid-dev.com/posts/hexo-injector/#%E6%96%87%E7%AB%A0%E6%97%B6%E6%95%88%E6%80%A7%E6%8F%90%E7%A4%BA -->
    
    <!-- Mathjax -->
    
</main>

                <!-- profile -->
                
            </div>
            <footer class="footer footer-unloaded">
    <!-- social  -->
    
        <div class="social">
            
    
        
            
                <a href="mailto:lolipop0703@qq.com" class="iconfont-archer email" title=email ></a>
            
        
    
        
            
                <a href="//github.com/LolipopJ" class="iconfont-archer github" target="_blank" title=github></a>
            
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
            
                <a href="https://twitter.com/Lolipop_0703" class="iconfont-archer twitter" target="_blank" title=twitter></a>
            
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
            
                <a href="/atom.xml" class="iconfont-archer rss" target="_blank" title=rss></a>
            
        
    


        </div>
    
    <!-- powered by Hexo  -->
    <div class="copyright">
        <span id="hexo-power">Powered by <a href="https://hexo.io/" target="_blank">Hexo</a></span><span class="iconfont-archer power">&#xe635;</span><span id="theme-info">theme <a href="https://github.com/fi3ework/hexo-theme-archer" target="_blank">Archer</a></span>
    </div>
    <!-- website approve for Chinese user -->
    
        <div class="website-approve">
            
                <span id="icp-approve" class="icp-approve">
                    <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备 2021015698号</a>
                </span>
            
            
                
                <img class="beian-img" src="/assets/beian.png" />
                <span id="beian-approve" class="beian-approve">
                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010802001109" target="_blank">京公网安备 51010802001109号</a>
                </span>
            
        </div>
    
    <!-- 不蒜子  -->
    
        <div class="busuanzi-container">
            
             
                <span id="busuanzi_container_site_pv">PV: <span id="busuanzi_value_site_pv"></span> :)</span>
            
        </div>
    	
</footer>

        </div>
        <!-- toc -->
        
            <div class="toc-wrapper toc-wrapper-loding" style=







    top:50vh;

>
                <div class="toc-catalog">
                    <span class="iconfont-archer catalog-icon">&#xe613;</span><span>CATALOG</span>
                </div>
                <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E6%9C%AC%E5%9C%B0%E7%9A%84-Pixiv-%E5%9B%BE%E7%89%87%E5%BB%BA%E7%AB%8B%E7%B4%A2%E5%BC%95"><span class="toc-number">1.</span> <span class="toc-text">为本地的 Pixiv 图片建立索引</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E6%95%B0%E6%8D%AE%E5%BA%93-Pixiv-%E5%9B%BE%E7%89%87%E7%B4%A2%E5%BC%95%E4%BF%A1%E6%81%AF"><span class="toc-number">1.1.</span> <span class="toc-text">初始化数据库 Pixiv 图片索引信息</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%9D%E8%B7%AF%EF%BC%9A%E7%88%AC%E5%8F%96-Pixiv-%E5%9B%BE%E7%89%87%E7%9A%84%E6%BA%90%E6%96%87%E4%BB%B6%E5%9C%B0%E5%9D%80"><span class="toc-number">1.2.</span> <span class="toc-text">思路：爬取 Pixiv 图片的源文件地址</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA-Telegram-Bot-%E6%B7%BB%E5%8A%A0%E9%9A%8F%E6%9C%BA%E8%8E%B7%E5%8F%96-Pixiv-%E5%9B%BE%E7%89%87%E7%9A%84%E6%8E%A5%E5%8F%A3"><span class="toc-number">2.</span> <span class="toc-text">为 Telegram Bot 添加随机获取 Pixiv 图片的接口</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%9A%8F%E6%9C%BA%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%E5%BA%93%E4%B8%AD%E7%9A%84%E4%B8%80%E4%B8%AA-Pixiv-%E5%9B%BE%E7%89%87%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80"><span class="toc-number">2.1.</span> <span class="toc-text">随机获取数据库中的一个 Pixiv 图片访问地址</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0-Telegram-Bot-%E5%91%BD%E4%BB%A4"><span class="toc-number">2.2.</span> <span class="toc-text">添加 Telegram Bot 命令</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8-Pixiv-%E5%9B%BE%E7%89%87%E4%BB%A3%E7%90%86"><span class="toc-number">2.2.1.</span> <span class="toc-text">直接使用 Pixiv 图片代理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%80%9D%E8%B7%AF%EF%BC%9A%E8%8E%B7%E5%8F%96-Pixiv-%E5%9B%BE%E7%89%87%E5%B9%B6%E8%BD%AC%E5%8F%91"><span class="toc-number">2.2.2.</span> <span class="toc-text">思路：获取 Pixiv 图片并转发</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA-Koa-%E6%B7%BB%E5%8A%A0%E9%9A%8F%E6%9C%BA%E8%8E%B7%E5%8F%96-Pixiv-%E5%9B%BE%E7%89%87%E7%9A%84%E6%8E%A5%E5%8F%A3"><span class="toc-number">3.</span> <span class="toc-text">为 Koa 添加随机获取 Pixiv 图片的接口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E6%96%87%E7%AB%A0"><span class="toc-number">4.</span> <span class="toc-text">参考文章</span></a></li></ol>
            </div>
        
        <!-- sidebar -->
        <div class="sidebar sidebar-hide">
    <ul class="sidebar-tabs sidebar-tabs-active-0">
        <li class="sidebar-tab-archives"><span class="iconfont-archer">&#xe67d;</span><span class="tab-name">Archive</span></li>
        <li class="sidebar-tab-tags"><span class="iconfont-archer">&#xe61b;</span><span class="tab-name">Tag</span></li>
        <li class="sidebar-tab-categories"><span class="iconfont-archer">&#xe666;</span><span class="tab-name">Cate</span></li>
    </ul>
    <div class="sidebar-content sidebar-content-show-archive">
        <div class="sidebar-panel-archives">
    <!-- 在 ejs 中将 archive 按照时间排序 -->
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
    
    
    <div class="total-and-search">
        <div class="total-archive">
        Total : 31
        </div>
        <!-- search  -->
        
            <div class="site-search site-search-loading popup-trigger">
                <span class="iconfont-archer search-icon">&#xe627;</span>
            </div>
        
    </div>
    
    <div class="post-archive">
    
        
            
            
            <div class="archive-year"> 2022 </div>
            <ul class="year-list">
            
        
        <li class="archive-post-item">
            <span class="archive-post-date">02/12</span>
            <a class="archive-post-title" href="/2022/02/11/connect-with-pgsql/">连接到 Windows 端的 PostgreSQL 数据库</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">01/13</span>
            <a class="archive-post-title" href="/2022/01/12/random-get-me-a-picture/">这位客官，要来一张我珍藏许久的图片吗</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">01/09</span>
            <a class="archive-post-title" href="/2022/01/08/start-telegram-bot/">从零开始使用 Telegram Bot</a>
        </li>
    
        
            
            
                
                </ul>
            
            <div class="archive-year"> 2021 </div>
            <ul class="year-list">
            
        
        <li class="archive-post-item">
            <span class="archive-post-date">08/19</span>
            <a class="archive-post-title" href="/2021/08/18/build-my-resume/">把自己的简历做成 Web 页面</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">08/13</span>
            <a class="archive-post-title" href="/2021/08/12/github-jsdelivr-hold-image/">使用 jsDelivr 加速 Github 仓库搭建自己的图床服务</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">08/07</span>
            <a class="archive-post-title" href="/2021/08/06/editorconfig-prettier/">使用 EditorConfig 和 Prettier 优雅地配置 VSCode 代码格式化</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">07/10</span>
            <a class="archive-post-title" href="/2021/07/09/switch-travis-to-github-workflow/">更换持续集成工具，从 Travis 到 Github Actions</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">07/08</span>
            <a class="archive-post-title" href="/2021/07/07/browser-behind-visit-url/">在浏览器中输入 URL 到显示网页，背后发生了什么</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">06/26</span>
            <a class="archive-post-title" href="/2021/06/25/web-font-for-hexo-theme-archer/">为 Archer 主题更换字体</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">06/25</span>
            <a class="archive-post-title" href="/2021/06/24/website-deployment-docker-nginx/">使用基于 Docker 的 Nginx 部署静态网页项目</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">06/09</span>
            <a class="archive-post-title" href="/2021/06/08/linux-project-v/">在 Linux 系统下启用 Project-V</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">06/04</span>
            <a class="archive-post-title" href="/2021/06/03/euler-install-mysql/">在 Euler 系统上离线安装 MySQL 5.7</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">05/20</span>
            <a class="archive-post-title" href="/2021/05/19/js-use-class/">漫谈 JavsScript 类（Class）的使用</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">05/18</span>
            <a class="archive-post-title" href="/2021/05/17/js-closure/">漫谈 JavsScript 闭包</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">05/11</span>
            <a class="archive-post-title" href="/2021/05/10/js-hoisting/">JavsScript 变量提升和函数提升</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">05/08</span>
            <a class="archive-post-title" href="/2021/05/07/js-debounce-throttle/">函数防抖和节流，以及在 Vue 中的运用</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">04/26</span>
            <a class="archive-post-title" href="/2021/04/25/windows-install-grpc/">Windows 系统编译安装基于 C++ 的 gRPC</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">04/22</span>
            <a class="archive-post-title" href="/2021/04/21/linux-docker-install-grpc/">Linux 系统编译安装基于 C++ 的 gRPC</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">04/20</span>
            <a class="archive-post-title" href="/2021/04/19/linux-docker-gcc-update/">Linux 容器更新或降级 GCC 版本</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">03/29</span>
            <a class="archive-post-title" href="/2021/03/28/protobuf-learning/">Protobuf 学习笔记</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">03/17</span>
            <a class="archive-post-title" href="/2021/03/16/amap-import-vue/">在 Nuxt.js 中引入高德地图并实现定位及逆地理编码</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">03/16</span>
            <a class="archive-post-title" href="/2021/03/15/tencent-map-api-get-current-location/">使用腾讯位置服务进行 Web 前端定位</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">03/10</span>
            <a class="archive-post-title" href="/2021/03/09/xxx-is-not-a-symbolic-link/">提示 *** is not a symbolic link 解决方案</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">03/03</span>
            <a class="archive-post-title" href="/2021/03/02/nodejs-eslint-prettier/">Nuxt 项目配置 ESLint 和 Prettier 检查并规范代码质量与格式</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">02/23</span>
            <a class="archive-post-title" href="/2021/02/22/write-md-parser/">Webpack 读取本地 Markdown 文件并进行预处理</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">02/21</span>
            <a class="archive-post-title" href="/2021/02/20/tg-mtproto-one-click/">一键安装并配置 MTProto Proxy 代理 Telegram</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">02/19</span>
            <a class="archive-post-title" href="/2021/02/18/hexo-github-actions-ci-cd/">使用 Github Actions 持续集成与部署 Hexo 博客</a>
        </li>
    
        
            
            
                
                </ul>
            
            <div class="archive-year"> 2020 </div>
            <ul class="year-list">
            
        
        <li class="archive-post-item">
            <span class="archive-post-date">12/29</span>
            <a class="archive-post-title" href="/2020/12/28/ISO-IEC-IEEE-42010-des/">IEEE 1471（ISO/IEC/IEEE 42010）架构描述方法</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">09/28</span>
            <a class="archive-post-title" href="/2020/09/27/pytorch-install-windows-10/">PyTorch 在 Windows 10 系统下的环境配置及安装</a>
        </li>
    
        
            
            
                
                </ul>
            
            <div class="archive-year"> 2019 </div>
            <ul class="year-list">
            
        
        <li class="archive-post-item">
            <span class="archive-post-date">12/27</span>
            <a class="archive-post-title" href="/2019/12/26/archer-theme-update-log/">基于 Archer 主题的博客开发</a>
        </li>
    
        
        <li class="archive-post-item">
            <span class="archive-post-date">12/27</span>
            <a class="archive-post-title" href="/2019/12/26/hello-hexo-world/">Hello Hexo World</a>
        </li>
    
    </div>
</div>

        <div class="sidebar-panel-tags">
    <div class="sidebar-tags-name">
        
            <span class="sidebar-tag-name" data-tags="开发日志">
                <span class="iconfont-archer">&#xe606;</span>
                开发日志
            </span>
        
            <span class="sidebar-tag-name" data-tags="Vue-2">
                <span class="iconfont-archer">&#xe606;</span>
                Vue-2
            </span>
        
            <span class="sidebar-tag-name" data-tags="软件体系架构设计">
                <span class="iconfont-archer">&#xe606;</span>
                软件体系架构设计
            </span>
        
            <span class="sidebar-tag-name" data-tags="JavaScript">
                <span class="iconfont-archer">&#xe606;</span>
                JavaScript
            </span>
        
            <span class="sidebar-tag-name" data-tags="Node">
                <span class="iconfont-archer">&#xe606;</span>
                Node
            </span>
        
            <span class="sidebar-tag-name" data-tags="Nuxt">
                <span class="iconfont-archer">&#xe606;</span>
                Nuxt
            </span>
        
            <span class="sidebar-tag-name" data-tags="Promise">
                <span class="iconfont-archer">&#xe606;</span>
                Promise
            </span>
        
            <span class="sidebar-tag-name" data-tags="博客开发">
                <span class="iconfont-archer">&#xe606;</span>
                博客开发
            </span>
        
            <span class="sidebar-tag-name" data-tags="Hexo">
                <span class="iconfont-archer">&#xe606;</span>
                Hexo
            </span>
        
            <span class="sidebar-tag-name" data-tags="hexo-theme-archer">
                <span class="iconfont-archer">&#xe606;</span>
                hexo-theme-archer
            </span>
        
            <span class="sidebar-tag-name" data-tags="计算机网络">
                <span class="iconfont-archer">&#xe606;</span>
                计算机网络
            </span>
        
            <span class="sidebar-tag-name" data-tags="网络安全">
                <span class="iconfont-archer">&#xe606;</span>
                网络安全
            </span>
        
            <span class="sidebar-tag-name" data-tags="密码学">
                <span class="iconfont-archer">&#xe606;</span>
                密码学
            </span>
        
            <span class="sidebar-tag-name" data-tags="resume">
                <span class="iconfont-archer">&#xe606;</span>
                resume
            </span>
        
            <span class="sidebar-tag-name" data-tags="CSS">
                <span class="iconfont-archer">&#xe606;</span>
                CSS
            </span>
        
            <span class="sidebar-tag-name" data-tags="Github-actions">
                <span class="iconfont-archer">&#xe606;</span>
                Github-actions
            </span>
        
            <span class="sidebar-tag-name" data-tags="rxjs">
                <span class="iconfont-archer">&#xe606;</span>
                rxjs
            </span>
        
            <span class="sidebar-tag-name" data-tags="PostgreSQL">
                <span class="iconfont-archer">&#xe606;</span>
                PostgreSQL
            </span>
        
            <span class="sidebar-tag-name" data-tags="Windows">
                <span class="iconfont-archer">&#xe606;</span>
                Windows
            </span>
        
            <span class="sidebar-tag-name" data-tags="EditorConfig">
                <span class="iconfont-archer">&#xe606;</span>
                EditorConfig
            </span>
        
            <span class="sidebar-tag-name" data-tags="Prettier">
                <span class="iconfont-archer">&#xe606;</span>
                Prettier
            </span>
        
            <span class="sidebar-tag-name" data-tags="VSCode">
                <span class="iconfont-archer">&#xe606;</span>
                VSCode
            </span>
        
            <span class="sidebar-tag-name" data-tags="Linux">
                <span class="iconfont-archer">&#xe606;</span>
                Linux
            </span>
        
            <span class="sidebar-tag-name" data-tags="MySQL">
                <span class="iconfont-archer">&#xe606;</span>
                MySQL
            </span>
        
            <span class="sidebar-tag-name" data-tags="Github">
                <span class="iconfont-archer">&#xe606;</span>
                Github
            </span>
        
            <span class="sidebar-tag-name" data-tags="jsDiliver">
                <span class="iconfont-archer">&#xe606;</span>
                jsDiliver
            </span>
        
            <span class="sidebar-tag-name" data-tags="ES6">
                <span class="iconfont-archer">&#xe606;</span>
                ES6
            </span>
        
            <span class="sidebar-tag-name" data-tags="GCC">
                <span class="iconfont-archer">&#xe606;</span>
                GCC
            </span>
        
            <span class="sidebar-tag-name" data-tags="Docker">
                <span class="iconfont-archer">&#xe606;</span>
                Docker
            </span>
        
            <span class="sidebar-tag-name" data-tags="CPP">
                <span class="iconfont-archer">&#xe606;</span>
                CPP
            </span>
        
            <span class="sidebar-tag-name" data-tags="gRPC">
                <span class="iconfont-archer">&#xe606;</span>
                gRPC
            </span>
        
            <span class="sidebar-tag-name" data-tags="ESLint">
                <span class="iconfont-archer">&#xe606;</span>
                ESLint
            </span>
        
            <span class="sidebar-tag-name" data-tags="Protobuf">
                <span class="iconfont-archer">&#xe606;</span>
                Protobuf
            </span>
        
            <span class="sidebar-tag-name" data-tags="机器学习">
                <span class="iconfont-archer">&#xe606;</span>
                机器学习
            </span>
        
            <span class="sidebar-tag-name" data-tags="PyTorch">
                <span class="iconfont-archer">&#xe606;</span>
                PyTorch
            </span>
        
            <span class="sidebar-tag-name" data-tags="Telegram">
                <span class="iconfont-archer">&#xe606;</span>
                Telegram
            </span>
        
            <span class="sidebar-tag-name" data-tags="Bot">
                <span class="iconfont-archer">&#xe606;</span>
                Bot
            </span>
        
            <span class="sidebar-tag-name" data-tags="Koa">
                <span class="iconfont-archer">&#xe606;</span>
                Koa
            </span>
        
            <span class="sidebar-tag-name" data-tags="Sequelize">
                <span class="iconfont-archer">&#xe606;</span>
                Sequelize
            </span>
        
            <span class="sidebar-tag-name" data-tags="Travis">
                <span class="iconfont-archer">&#xe606;</span>
                Travis
            </span>
        
            <span class="sidebar-tag-name" data-tags="MTProto">
                <span class="iconfont-archer">&#xe606;</span>
                MTProto
            </span>
        
            <span class="sidebar-tag-name" data-tags="Nginx">
                <span class="iconfont-archer">&#xe606;</span>
                Nginx
            </span>
        
            <span class="sidebar-tag-name" data-tags="Markdown">
                <span class="iconfont-archer">&#xe606;</span>
                Markdown
            </span>
        
            <span class="sidebar-tag-name" data-tags="Webpack">
                <span class="iconfont-archer">&#xe606;</span>
                Webpack
            </span>
        
    </div>
    <div class="iconfont-archer sidebar-tags-empty">&#xe678;</div>
    <div class="tag-load-fail" style="display: none; color: #ccc; font-size: 0.6rem;">
        缺失模块，请参考主题文档进行安装配置：https://github.com/fi3ework/hexo-theme-archer#%E5%AE%89%E8%A3%85%E4%B8%BB%E9%A2%98
    </div> 
    <div class="sidebar-tags-list"></div>
</div>

        <div class="sidebar-panel-categories">
    <div class="sidebar-categories-name">
    
        <span class="sidebar-category-name" data-categories="学习琐事">
            <span class="iconfont-archer">&#xe60a;</span>
            学习琐事
        </span>
    
        <span class="sidebar-category-name" data-categories="前端开发">
            <span class="iconfont-archer">&#xe60a;</span>
            前端开发
        </span>
    
        <span class="sidebar-category-name" data-categories="后端开发">
            <span class="iconfont-archer">&#xe60a;</span>
            后端开发
        </span>
    
        <span class="sidebar-category-name" data-categories="技术琐事">
            <span class="iconfont-archer">&#xe60a;</span>
            技术琐事
        </span>
    
    </div>
    <div class="iconfont-archer sidebar-categories-empty">&#xe678;</div>
    <div class="sidebar-categories-list"></div>
</div>

    </div>
</div>

        <!-- site-meta -->
        <script>
    var siteMetaRoot = "/"
    if (siteMetaRoot === "undefined") {
        siteMetaRoot = '/'
    }
    var siteMeta = {
        url: "https://LolipopJ.github.io",
        root: siteMetaRoot,
        author: "Lolipop"
    }
</script>

        <!-- import experimental options here -->
        <!-- Custom Font -->

    <!-- Check browser compatibility of CSS variables -->
    <script>
        if (browserSupportCSSVariables === undefined) {
            var browserSupportCSSVariables = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
        }
    </script>
    <script>
        if (browserSupportCSSVariables) {
            var customFontName = 'Noto Sans SC:n3,n4,n5,n7'
            var customFontUrl = 'https://fonts.googleapis.cnpmjs.org/css2?family=Noto+Sans+SC:wght@300;400;500;700&amp;display=swap'
            if (!customFontName) {
                console.log('Custom font name is not set or read failed');
            }
            if (!customFontUrl) {
                console.log('Custom font url is not set or read failed');
            }
        } else {
            console.error('Current browser doesn\'t support custom font.')
        }
    </script>
    <script src="/scripts/customFontLoader.js?v=20211217" defer></script>


        <!-- main func -->
        <script src="/scripts/main.js?v=20211217"></script>
        <!-- dark mode -->
        <script src="/scripts/dark.js?v=20211217"></script>
        <!-- fancybox -->
        <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" defer></script>
        <!-- algolia -->
        
            <div class="site-search site-search-loading">
    <div class="algolia-popup popup">
        <div class="algolia-search">
            <div class="algolia-search-input-icon">
                <i class="fa fa-search"></i>
            </div>
            <div class="algolia-search-input" id="algolia-search-input"></div>
            <div class="popup-btn-close">
                <i class="iconfont-archer">&#xe609;</i>
            </div>
        </div>

        <div class="algolia-results">
            <div id="algolia-stats" class="algolia-stats"></div>
            <div id="algolia-hits"></div>
            <div id="algolia-pagination" class="algolia-pagination"></div>
        </div>
    </div>
</div>

            <script src="/scripts/search.js?v=20211217" defer></script>
        
        <!-- busuanzi -->
        
            <script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>
        
        <!-- CNZZ -->
        
        <!-- async load share.js -->
        
            <script src="/scripts/share.js?v=20211217" async></script>
        
        <!-- mermaid -->
        
    </body>
</html>
